<template>
    <div>
        <div class="cameraBox">
            <video id="videoCamera" class="videoCamera" :width="videowidth" :height="videoheight" autoplay>

            </video>
            <canvas id="canvasCamera" class="canvasCamera">

            </canvas>
            <div>
                <el-button @click="photograph">拍照</el-button>
                <!-- 默认状态 -->
                <el-button v-if="flag" @click="openCamera">打开摄像头</el-button>
                <el-button v-else   @click="closeCarema">关闭摄像头</el-button>
                <el-button @click="resetPhoto">重置</el-button>
                <el-button @click="goStuInfoEntry">提交</el-button>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                flag:false,
                videowidth:400,
                videoheight:350,
                videoHeight: null,
                thisContext: null,
                thisCanvas: null,
            }
        },
        mounted(){
            this.openCamera();
        },
        methods:{
            resetPhoto(){
                //重置 新照照片  清除画布当中的照片 重新拍照
                // 前提是先拍照后清空
                this.thisCanvas = document.querySelector(".canvasCamera");
                this.thisContext = this.thisCanvas.getContext("2d");
                // 先清空
                this.thisContext.clearRect(0, 0, this.videoWidth, this.videoHeight);
            },
            goStuInfoEntry(){
                // 提交按钮的作用  是将this.imgSrc传递给学生信息录入组件  跳转到学生信息录入
                // 得到base64字符串
                console.log(this.imgSrc);
                this.$router.push({
                    name:'StuInfoEntry',
                    query:{
                        imgSrc:this.imgSrc,
                    }
                })
            },
            // 拍照
            photograph(){
                // 拍照实际上就是将video当中播放的某个瞬间 用画图的方式 画到canvas当中
                // drawImage
                // 获取获取画布
                this.thisCanvas = document.querySelector('.canvasCamera');
                this.thisContext =this.thisCanvas.getContext('2d');

                this.thisContext.drawImage(
                    this.thisVideo,
                    100,
                    80,
                    this.videowidth,
                    this.videoheight
                )

                // this.imgSrc 是base64字符串传递给学生信息录入组件
                // toDataURL返回值是包含图片信息的URL（base64）
                // toDataURL有两个参数  第一个参数 图片的类型   第二个参数为图片的质量 0-1，默认为0.92，超出范围为默认值
                this.imgSrc=this.thisCanvas.toDataURL("image/png");
                // console.log(this.imgSrc);
            },
            // 打开本地摄像头
            openCamera(){
                this.flag=false;
                // 获取video
                this.thisVideo = document.getElementById("videoCamera");
                // 打开本地摄像头 navigator.mediaDevices.getUserMedia
                // 旧版本浏览器 可能不支持mediaDevices  我们就将navigator.mediaDevices设计为一个空对象
                if(navigator.mediaDevices === undefined){
                    navigator.mediaDevices={}
                }
                // 有些浏览器 getUserMedia 有的  有的某些浏览器它会覆盖该属性
                if(navigator.mediaDevices.getUserMedia === undefined){
                    navigator.mediaDevices.getUserMedia = function (constraints) {
                        // 获取一下不同浏览器的getUserMedia
                        let getUserMedia =
                            navigator.webkitGetUserMedia ||
                            navigator.mozGetUserMedia ||
                            navigator.getUserMedia;

                        // 如果在这些浏览器之外还是没getUserMedia,告诉请更换浏览器

                        if(!getUserMedia){
                            return Promise.reject(
                                new Error('请更换浏览器')
                            )
                        }
                        // 如果有getUserMedia  （在不同内核有） 将其给navigator
                        return new Promise((resolve, reject) => {
                            getUserMedia.call(navigator, constraints, resolve, reject);
                        });
                    }
                }
                // constraints 传入音频视频文件信息
                const constraints = {
                    audio:false,
                    video:{
                        width:this.videowidth,
                        height:this.videoheight,
                    }
                }
                //调用摄像头
                navigator.mediaDevices.getUserMedia(constraints).then((res)=>{
                    // res数据流（实时数据流）
                    // video 如何引入视频文件  src  视屏文件的路径
                    // video srcObject 它可以实时数据 但是 低版本浏览器不支持
                    console.log(res);
                    // video当中是否有srcObject属性如果有 ，将实时数据流放到该函数内即可
                    console.log(this.thisVideo);
                    if("srcObject" in this.thisVideo){
                        this.thisVideo.srcObject = res;
                    }else{
                         // window.URL.createObjectURL 创建一个新的对象 URL
                         this.thisVideo.src=window.URL.createObjectURL(res);
                    }
                    //onloadedmetadata 视频数据加载完毕后就会触发
                    this.thisVideo.onloadedmetadata=function(){
                        console.log('视频元数据加载毕');
                        // Cannot read properties of undefined (reading 'play')
                        console.log(this);
                        this.play();
                    }
                }) .catch((err)=>{
                    console.log(err);
                    this.$message({
                        message:'没有开启摄像头或者浏览器不支持请求更换浏览器',
                        type:'warning',
                    })
                })
            },
            // 关闭本地摄像头
            closeCarema(){
                if(this.thisVideo && this.thisVideo !== null){
                    // 关闭摄像头
                    this.thisVideo.srcObject.getTracks()[0].stop();
                    this.flag=true;
                }
            },
        }
    }
</script>

<style lang="scss" scoped>

</style>